<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
    <script src="../lib/bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
    <script src="../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/Prompt_box.css">
</head>

<body>
    <div id="modal-header">

    </div>
    <div class="dropdown">
        <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="addOrUpdate(1)">
            <span class=" glyphicon glyphicon-plus" aria-hidden="true"></span>新增
        </button>
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
            <span class="input-group-addon" id="basic-addon2">@example.com</span>
        </div>

    </div>
    <div class="tableStyle">
        <div>
            <table class="table">
                <thead>
                    <tr id="tableThBox">

                    </tr>
                </thead>
                <tbody id="tableTrBox">

                </tbody>
            </table>
        </div>
    </div>
    <!--modal-->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                    </button>
                    <div id="exampleModalLabel"></div>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">角色名称:</label>
                            <input type="text" class="form-control" id="recipient-name">
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="control-label">角色说明:</label>
                            <textarea class="form-control" id="message-text"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="control-label">状态:</label>
                            <lable>
                                <input type="radio" name="1" value="1" class="formInput" checked="true">开启
                            </lable>
                            <lable>
                                <input type="radio" name="1" value="2" class="formInput">关闭
                            </lable>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" onclick="reset()">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="submit()">提交</button>
                </div>
            </div>
        </div>
    </div>

</body>
<script>
    let title = ''
    let type = ''
    let updateId = ''
    let header = ['角色名', '角色说明', '创建时间', "状态", '操作']
    let data = [{
        role: "张三",
        roleRemark: "张三说明",
        createTime: "2021-12-13",
        state: 1,
        id: 1
    }, {
        role: "里斯",
        roleRemark: "里斯说明",
        createTime: "2021-12-13",
        state: 1,
        id: 2
    }, {
        role: "王五",
        roleRemark: "王五说明",
        createTime: "2021-12-13",
        state: 1,
        id: 3
    }, {
        role: "赵六",
        roleRemark: "赵六说明",
        createTime: "2021-12-13",
        state: 1,
        id: 4
    }, ]

    function tableThBox() {
        let thHtml = ''
        header.forEach(item => {
            thHtml += `<th>${item}</th>`
        })
        return thHtml
    }

    function tableTrBox() {
        let trHtml = ''
        data.forEach((item, index) => {
            trHtml += `<tr>
                                <td>${item.role}</td>
                                <td>${item.roleRemark}</td>
                                <td>${item.createTime}</td>
                                <td>${item.state}</td>
                                <td style="width: 20%">
                                    <div  class="btn-group btn-group-justified" role="group" aria-label="...">
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default" onclick="addOrUpdate(${2},${index},${item.id})">编辑</button>
      </div>
    
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">删除</button>
      </div>
    </div>
                                </td>
                           </tr>`
        })
        return trHtml
    }

    function addOrUpdate(num, index, id) {
        type = num
        title = num === 1 ? "新增角色" : "编辑角色";
        document.getElementById("exampleModalLabel").innerHTML = title
        $('#exampleModal').modal("show")
        if (num === 2) {
            let obj = data[index]
            $('#recipient-name').val(obj.role)
            $('#message-text').val(obj.roleRemark)
            updateId = id
            if (obj.state == 1) {
                $('.formInput')[0].checked = true
                $('.formInput')[1].checked = false
            } else {
                $('.formInput')[0].checked = false
                $('.formInput')[1].checked = true
            }
        }
    }

    function reset() {
        $('#recipient-name').val('')
        $('#message-text').val('')
        $('.formInput')[0].checked = true
        $('.formInput')[1].checked = false
    }

    function getNowFormatDate() {
        let date = new Date();
        let seperator1 = "-";
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        let currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    }

    function submit() {

        let a = $('#recipient-name').val()
        let b = $('#message-text').val()
        if (!a) {
            alert("请输入角色名称")
            return false
        }
        let value
        for (let i = 0; i < $('.formInput').length; i++) {
            if ($('.formInput')[i].checked) {
                value = $('.formInput')[i].value
            }
        }
        if (type == 1) { //新增
            let obj = {
                role: a,
                roleRemark: b,
                createTime: getNowFormatDate(),
                state: value,
                id: data[data.length - 1].id + 1
            }
            data.push(obj)
        } else { //编辑
            data.forEach((item, index) => {
                if (item.id == updateId) {
                    data[index] = {
                        role: a,
                        roleRemark: b,
                        createTime: getNowFormatDate(),
                        state: value,
                        id: updateId
                    }


                }
            })
        }
        let message = type == 1 ? '新增角色成功' : '修改成功'
        addMessage(1, message)
        clearMessage()
        creatData()
        reset()
        $('#exampleModal').modal("hide")
    }

    function addMessage(type, message) {
        /*
         * type=1 成功
         * */
        let messageType = ''
        if (type == 1) messageType = "alert alert-success "
        $('#modal-header').after(
            `<div id="myAlert" class="${messageType}">
                <a href="#" class="close" data-dismiss="alert">×</a>
                <strong>${message}</strong>
                </div>`
        );
    }

    function clearMessage() {
        setTimeout(function() {
            $('#myAlert').remove();
        }, 1000);
    }

    function creatData() {
        console.log(data)
        document.getElementById("tableTrBox").innerHTML = tableTrBox()

    }

    window.onload = function() {
        document.getElementById("tableThBox").innerHTML = tableThBox()
        creatData()
    }
</script>
<style>
    .dropdown {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        padding: 0 20px;
    }
    
    .tableStyle {
        margin-top: 20px;
        padding: 0 20px;
    }
    
    #myAlert {
        position: fixed;
        width: 50%;
        left: 25%;
        z-index: 1000;
        top: 1%;
    }
</style>

</html>